<template>
  <div class="can-container">
    <div>
      <span class="title">用户查询</span>
      <el-divider />
      <div class="form filter-container">
        <el-form ref="queryForm" label-width="90px" :model="queryForm">
          <el-row>
            <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="queryForm.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="queryForm.username" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="mobilePhone">
                <el-input v-model="queryForm.mobilePhone" placeholder="请输入联系方式" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="state">
                <el-radio-group v-model="queryForm.state">
                  <el-radio-button label>不限</el-radio-button>
                  <el-radio-button label="ENABLED">启用</el-radio-button>
                  <el-radio-button label="DISABLED">禁用</el-radio-button>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="margin-left: 90px;">
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-refresh" @click="handleReset('queryForm')">重置</el-button>
        </div>
      </div>
    </div>
    <div class="userList">
      <span class="title">用户列表</span>
      <el-divider />
      <div class>
        <el-select v-model="userType" style="width:200px" @change="handleChangeUserType">
          <el-option label="PC端用户" value="PC" />
          <el-option label="微信端用户" value="WX" />
          <el-option label="APP端用户" value="APP" />
        </el-select>
        <el-button icon="el-icon-plus" type="primary" @click="handleNewAddAccount">新增账户</el-button>
        <el-button
          v-show="userType == 'PC'"
          class="btnuser"
          :disabled="multipleSelection.length == 0"
          @click="handleBatchStop"
        >禁用所选</el-button>
        <el-button
          v-show="userType == 'PC'"
          class="btnuser"
          :disabled="multipleSelection.length == 0"
          @click="handleBatchStart"
        >启用所选</el-button>
        <el-button
          v-show="userType == 'PC'"
          icon="el-icon-delete"
          type="danger"
          :disabled="multipleSelection.length == 0"
          @click="handleBatchDelete"
        >删除所选</el-button>
      </div>
      <el-divider />
      <component
        ref="table"
        :is="currentComponent"
        :queryForm="queryForm"
        @bindMultipleSelection="bindMultipleSelection"
      />
    </div>
  </div>
</template>

<script>
import {
  accountDelete,
  SaveAccountState
} from '@/api/project/system/account.js'
import PClist from '../components/PClist.vue'
import WXlist from '../components/WXlist.vue'
import APPlist from '../components/APPlist.vue'
export default {
  data() {
    return {
      // 条件查询
      queryForm: {
        name: '',
        mobilePhone: '',
        state: '',
        username: ''
      },
      userType: 'PC', // 用户类型
      multipleSelection: [], // 多选操作数据
      currentComponent: PClist
    }
  },
  methods: {
    // 查询按钮
    handleSearch: function() {
      this.$refs['table'].handleGetTable(1)
    },
    // 多选回调
    bindMultipleSelection: function(val) {
      this.multipleSelection = val
    },
    // 查询重置按钮
    handleReset: function(formName) {
      this.$refs[formName].resetFields()
    },
    // 新增账户
    handleNewAddAccount: function() {
      this.$refs.table.handleNewAddAccount()
    },
    // 批量启用账户
    handleBatchStart: function() {
      const accounts = this.multipleSelection
      this.$confirm('此操作将启动所选用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        const ids = accounts
          .map(item => {
            return item.userId
          })
          .join(',')
        const params = {
          ids: ids,
          state: 'ENABLED'
        }
        SaveAccountState(params).then(res => {
          this.$message.success('操作成功！')
          this.$refs['table'].handleGetTable()
          this.multipleSelection = []
        })
      })
    },
    // 批量停用账户
    handleBatchStop: function() {
      const accounts = this.multipleSelection
      this.$confirm('此操作将停用所选用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        const ids = accounts
          .map(item => {
            return item.userId
          })
          .join(',')
        const params = {
          ids: ids,
          state: 'DISABLED'
        }
        SaveAccountState(params).then(res => {
          this.$message.success('操作成功！')
          this.$refs['table'].handleGetTable()
          this.multipleSelection = []
        })
      })
    },

    // 批量删除账户
    handleBatchDelete: function() {
      const accounts = this.multipleSelection
      this.$confirm('此操作将永久删除所选用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(res => {
        const ids = accounts
          .map(item => {
            return item.userId
          })
          .join(',')
        accountDelete({ ids }).then(res => {
          this.$message.success('操作成功！')
          this.$refs['table'].handleGetTable(1)
        })
      })
    },
    // 用户类型切换
    handleChangeUserType: function(val) {
      if (val == 'PC') {
        this.currentComponent = PClist
      } else if (val == 'WX') {
        this.currentComponent = WXlist
      } else {
        this.currentComponent = APPlist
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.can-container {
  padding: 20px;
  background: #fff;
  .title {
    font-size: 24px;
    font-weight: 500;
    color: rgba(72, 73, 77, 1);
    line-height: 33px;
  }
}

.btnsearch {
  background: #969799;
  color: white;
}

.btnReset {
  background: white;
  color: #969799;
}
.userList {
  margin: 30px 0px;
}
.btnuser {
  border: 1px solid #2e8ae6;
  color: #2e8ae6;
}
.pages {
  text-align: center;
  margin: 20px auto;
}
.rolesTitle {
  font-size: 14px;
  color: #333333;
}
.rolesBox {
  width: 100%;
  height: 308px;
  overflow: auto;
  background: #f8f8f8;
  border-radius: 4px;
  padding: 5px 15px;
}
.rolesBox p {
  padding: 5px;
  font-size: 12px;
  color: #333;
  display: flex;
  justify-content: space-between;
}
.rolesBox p.clickNo {
  color: #2e8ae6;
  cursor: pointer;
}
.rolesBox p:hover {
  color: #2e8ae6;
  cursor: pointer;
}
.p-1 {
  padding: 0 10px;
}
</style>

<style lang="scss" scoped>
.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 120px;
  line-height: 120px;
}
.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}
</style>
